<template>
  <!--<transition name="el-fade-in-linear">-->
  <div class="main-bg">
    <div class="first">
      <el-row >
        <!--<el-button class="el-icon-plus" type="primary" @click="addClick()" size="mini">-->
          <!--新增账号-->
        <!--</el-button>-->
        <el-button :disabled="radio==''" class="mg-i-perm" type="primary" @click="lookUserPerm()" size="mini">
          账号权限
        </el-button>
        <el-button :disabled="radio==''" class="mg-i-perm" type="primary" @click="editAdminLoginPerm()" size="mini">
          后台登陆权限
        </el-button>
      </el-row>
      <div style="height:5px;">&nbsp;</div>
      <!-- 用户搜索选项组建 -->
      <vsearchtag  @toSearchFilter="toSearchFilter" :chooseParams="pageinfo.params.findParams" />
      <div style="height:5px;">&nbsp;</div>
    </div>
    <el-table
      border
      :row-class-name="tableRowClassName"
      style="width:100%"
      size="mini"
      :max-height="slide_h"
      @header-contextmenu="showMenu"
      :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
      :data="data.data"
      ref="table"
      highlight-current-row
      @current-change="cellClick"
    >
      <el-table-column  width="50" center>
        <template slot="header" slot-scope="header" >
          <vproper :flag="'#'" :bottom="'bottom-start'" :findParams="pageinfo.params.findParams.address"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          <el-radio :label="scope.row.id" v-model="radio">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column  width="60" prop="id" label="ID"/>
      <el-table-column>
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.userName"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="账号状态" width="120">
        <template slot="header" slot-scope="header">
          <vproper :width="50" :findParams="pageinfo.params.findParams.state"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state==0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="lockClick(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header" slot-scope="header">
          <vproper  :findParams="pageinfo.params.findParams.mobile"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="header">
          <vproper :findParams="pageinfo.params.findParams.nickName"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.nickName}}
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot="header" slot-scope="header">
          <vproper :width="50" :findParams="pageinfo.params.findParams.sex"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          <span v-text="determineSex(scope.row.sex)"></span>
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header" slot-scope="header">
          <vproper :findParams="pageinfo.params.findParams.age"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.age}}
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="备注"/>
      <el-table-column width="180">
        <template slot="header" slot-scope="header">
          <vproper :bottom="'bottom-end'" :width="180" :findParams="pageinfo.params.findParams.createTime"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column type="expand" width="80" label="详细资料">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="QQ">
              {{ props.row.qq }}
            </el-form-item>
            <el-form-item label="Email">
              {{ props.row.email }}
            </el-form-item>
            <el-form-item label="地址">
              {{ props.row.address}}
            </el-form-item>
            <el-form-item label="头像">
              <img class="imgMiddle" :src="RESOURCE_URL+props.row.thumbNailImage"/>
            </el-form-item>
            <el-form-item label="上次登录">
              {{ props.row.lastLoginTime }}
            </el-form-item>
            <el-form-item label="本次登录">
              {{props.row.currentLoginTime}}
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <div class="first">
      <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"/>
    </div>
    <v-dialog v-if="dialogshow == 1"
              :isadd="isadd"
              :dialogshow="dialogshow == 1"
              :dialoginfo="dialoginfo"
              @changedialogshow="changedialogshow"/>
    <d_editUserRoles v-else-if="dialogshow == 2"
               :dialogshow="dialogshow == 2"
               :dialoginfo="dialoginfo"
               @changedialogshow="changedialogshow"/>
    <d_showUserPerms v-else-if="dialogshow == 3"
               :dialogshow="dialogshow == 3"
               :dialoginfo="dialoginfo"
               @changedialogshow="changedialogshow"/>
    <d_userBaseInfoEdit v-else-if="dialogshow == 4"
               :dialogshow="dialogshow == 4"
               :dialoginfo="dialoginfo"
               @changedialogshow="changedialogshow"/>
  </div>
  <!--</transition>-->
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  const dialog = () =>
    import ("@/components/modules/sysManagement/user/view_dialog_userEdit")
  const d_editUserRoles = () =>
    import ("@/components/modules/sysManagement/user/view_dialog_editUserRoles")
  const d_showUserPerms = () =>
    import ("@/components/modules/sysManagement/user/view_dialog_showUserPerms")
  const d_userBaseInfoEdit = () =>
    import ("@/components/modules/sysManagement/user/view_dialog_userBaseInfoEdit")
  import tsearchtag from "@/components/search/template_tag_search"
  import tproper from "@/components/search/template_proper_search"
  export default {
    inject:["reload"],
    components: {
      "v-page": pagination,
      "v-dialog": dialog,
      "d_editUserRoles": d_editUserRoles,
      "d_showUserPerms": d_showUserPerms,
      "d_userBaseInfoEdit": d_userBaseInfoEdit ,
      "vproper": tproper,
      "vsearchtag":tsearchtag
    },
    data() {
      return {
        RESOURCE_URL:this.proAPI.RESOURCE_URL,
        isadd: false,
        dialoginfo: {},
        dialogshow: 0,
        isajax: false,
        data: "",
        slide_h:document.body.offsetHeight - (224),
        loadingTxt: "",
        radio: "",
        currentData: "",
        pageinfo: this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.sysUsers),
        search: ""
      }
    },
    methods: {
      init() {
        // console.log(document.body.offsetHeight)
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllAdminUserInfoBaseVo,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllAdminUserInfoBaseVo,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
          this.data = res;
          this.pageinfo.pages = res.pages;
          this.pageinfo.total = res.total;
          // console.log(this.pageinfo);
        })
      },
      editPwdClick(row) {
        this.dialoginfo = {"id": this.currentData.id, "userName": this.currentData.userName};
        this.isadd = false;
        this.dialogshow = 1;
      },
      editAdminLoginPerm() {
        this.$confirm('你确定更改该账号后台登陆权限吗', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            // console.log(action);
            if (action == "confirm") {
              this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.lockSysUserAdminLoginPerm,lock:1,text:this.loadingTxt});
              this.proAPI.postJson(this.proAPI.URLS.lockSysUserAdminLoginPerm, {"id": this.currentData.id}).then((res) => {
                this.$message.success({
                  "message": res.message
                })
              })
            }
          }
        });
      },
      lockClick(row) {
        var url = row.state == 0 ? this.proAPI.URLS.lockSysUserAccount : this.proAPI.URLS.unlockSysUserAccount;
        var txt = row.state == 0 ? "你确定 【锁定】 此账号吗?" : "你确定 【解锁】 此账号吗?";
        this.$confirm(txt, '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            // console.log(action);
            if (action == "confirm") {
              this.$store.commit("saveLoadingMap",{"target":url,lock:1,text:this.loadingTxt});
              this.proAPI.postJson(url, {"id": row.id}).then((res) => {
                if (row.state == 0) {
                  row.state = 1;
                } else {
                  row.state = 0;
                }
                this.$message.success({
                  "message": res.message
                })
                this.reload();
              })
            }
          }
        });
      },
      editUserRole() {
        this.dialogshow = 2;
        this.dialoginfo = {"id": this.currentData.id, "userName": this.currentData.userName};
      },
      editUserInfo() {
        this.dialogshow = 4;
        this.dialoginfo = {
          "id": this.currentData.id,
          "userName": this.currentData.userName,
          "address": this.currentData.address,
          "age": this.currentData.age,
          "desc": this.currentData.desc,
          "email": this.currentData.email,
          "mobile": this.currentData.mobile,
          "nickName": this.currentData.nickName,
          "sex": this.currentData.sex,
          "qq": this.currentData.qq,
          "thumbNailImage": this.currentData.thumbNailImage,
          "headImage": this.currentData.headImage
        };
      },
      lookUserPerm() {
        this.dialogshow = 3;
        this.dialoginfo = {"id": this.currentData.id, "name": this.currentData.userName, "desc": this.currentData.desc};
      },
      addClick() {
        // console.log(123);
        this.isadd = true;
        this.dialoginfo = {"name": "", "desc": ""};
        this.dialogshow = 1;
        this.dialogurl = this.proAPI.URLS.addSysUserAccount;
      },
      cellClick(currentRow,oldCurrentRow) {
        if(currentRow!=undefined){
          this.currentData = currentRow;
          this.radio = currentRow.id
        }
      },
      changepaginfo() {
        // this.pageinfo.url=this.$route.path;
        this.$store.commit("savePageInfo",this.pageinfo);
        // console.log(this.pageinfo);
        this.init();
      },
      changedialogshow() {
        this.dialogshow = 0;
        // console.log(this.dialogshow);
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 1) {
          return 'success-row';
        }
        return '';
      },
      determineSex(type) {
        return this.proUtil.determineSex(type);
      },
      toSearchFilter(){
        //需要初始化一下选中状态
        this.currentData = "";
        this.radio = "";
        this.pageinfo.params.page=1;
        this.init();
      },
      headerClick(column, event){
        // console.log(column,event);
      },
      showMenu(column, event){
        // console.log(column, event);
      },
    },
    mounted() {
      this.init();
    },
    updated() {
      // console.log(333);
    },
    afterCreated() {

    }
  }
</script>
<style scoped>
  .el-table .success-row {
    background: #f0f9eb;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .success {
    text-color: #67C23A
  }

  .danger {
    text-color: #F56C6C
  }
  .mgbottom {
    margin-bottom: 5px;
  }

  .imgMiddle {
    height: 37px;
    vertical-align: middle
  }
</style>
